<template>
	<div class="layout-main">
		<div class="section section-filter">
			<div class="panel-title">
				<span class="title">筛选条件</span>
			</div>
			<div class="panel-content">
				<el-form ref="tableData.filter" :inline="true" :model="tableData.filter">
					<el-form-item label="线索创建时间" prop="adate">
						<el-date-picker v-model="tableData.filter.cdate" value-format="yyyy-MM-dd" type="date" placeholder="请选择线索创建时间"></el-date-picker>
					</el-form-item>
					<el-form-item label="编号" prop="clueCode">
						<el-input v-model="tableData.filter.clueCode" placeholder="请输入编号"></el-input>
					</el-form-item>
					<el-form-item label="来源渠道" prop="sourceType">
						<el-select v-model="tableData.filter.source" placeholder="请选择来源渠道">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品类型" prop="product">
						<el-select v-model="tableData.filter.product" placeholder="请选择产品类型">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="举报人姓名" prop="reflectName">
						<el-input v-model="tableData.filter.reflectName" placeholder="请输入举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="举报人手机号" prop="reflectPhone">
						<el-input v-model="tableData.filter.reflectPhone" placeholder="请输入举报人手机号"></el-input>
					</el-form-item>
					<el-form-item label="被举报人姓名" prop="beReportedName">
						<el-input v-model="tableData.filter.beReportedName" placeholder="请输入被举报人姓名"></el-input>
					</el-form-item>
					<el-form-item label="被举报人手机号" prop="beReportedPhone">
						<el-input v-model="tableData.filter.beReportedPhone" placeholder="请输入被举报人手机号"></el-input>
					</el-form-item>
					<!-- <el-form-item label="所属分部" prop="salesDaptName">
						<el-input v-model="tableData.filter.salesDaptName" placeholder="请输入所属分部"></el-input>
					</el-form-item>
					<el-form-item label="分部负责人" prop="salesName">
						<el-input v-model="tableData.filter.salesName" placeholder="请输入分部负责人"></el-input>
					</el-form-item> -->
					<el-form-item label="线索状态">
						<el-select v-model="tableData.filter.clueStatus" placeholder="请选择线索状态">
							<el-option label="所有" value=""></el-option>
							<el-option v-for="item in dicts.clueStatus" :key="item.id" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关键字">
						<el-input v-model="tableData.filter.keyword" title="请输入举报人或者被举报人或者手机号或者身份证" placeholder="请输入关键字"></el-input>
					</el-form-item>
				</el-form>
				<div class="form-btn">
					<button @click.prevent="sumbitSave">筛选</button>
					<button class="btn-reset" @click.prevent="reset">重置</button>
				</div>
			</div>
		</div>
		<div class="section section-table">
			<div class="panel-title">
				<span class="title">筛选结果</span>
			</div>
			<div class="panel-content">
				<el-table border :data="tableData.data" style="width: 100%">
					<el-table-column fixed="right" label="操作" width="60">
						<template slot-scope="scope">
							<permission permission-key="clue:queryClueInfoById">
								<router-link :to="{ path: '/clue/detail', query: {id: scope.row.id}}">详情</router-link>
							</permission>
							<!-- <permission permission-key="clue:switchClue">
								<template v-if="userInfo.id == scope.row.userId">
									<a v-if="scope.row.clueStatus == 1" @click="showCancelApplyLayer(scope.row.id)">取消提案</a>
									<a v-else-if="scope.row.clueStatus == 0||scope.row.clueStatus == 3" @click="showApplyLayer(scope.row.id)">提案</a>
									<a v-else class="disable">提案</a>
								</template>
								<template v-else>
									<a v-if="scope.row.clueStatus == 1" class="disable">取消提案</a>
									<a v-else class="disable">提案</a>
								</template>
							</permission>
							<permission permission-key="clue:abolishClue">
								<a v-if="userInfo.id == scope.row.userId&&(scope.row.clueStatus == 0||scope.row.clueStatus == 3)" @click="showInvalidLayer(scope.row.id)">作废</a>
								<a v-else class="disable">作废</a>
							</permission> -->
						</template>
					</el-table-column>
					<el-table-column prop="clueCode" label="编号" width="254"></el-table-column>
					<el-table-column label="线索获取时间" width="155">
						<template slot-scope="scope">{{ filter.formatDate(scope.row.clueDate) }}</template>
					</el-table-column>
					<el-table-column label="线索创建时间" width="155">
						<template slot-scope="scope">{{ filter.formatDate(scope.row.cdate) }}</template>
					</el-table-column>
					<el-table-column label="来源渠道" width="150">
						<template slot-scope="scope">{{ filter.filterType.sourceType(scope.row.source) }}</template>
					</el-table-column>
					<el-table-column label="产品类型" width="150">
						<template slot-scope="scope">{{ filter.filterType.productType(scope.row.product) }}</template>
					</el-table-column>
					<el-table-column prop="reflectName" label="举报人姓名" width="150"></el-table-column>
					<el-table-column prop="reflectPhone" label="举报人手机号" width="120"></el-table-column>
					<el-table-column prop="salesDeptName" label="举报人所属营业部" width="150">
					</el-table-column>
					<el-table-column prop="beReportedName" label="被举报人姓名" width="108"></el-table-column>
					<el-table-column prop="beReportedPhone" label="被举报人手机号" width="140"></el-table-column>
					<el-table-column prop="beReportedBusiness" label="被举报人所属营业部" width="150">
					</el-table-column>
					<el-table-column label="线索状态" width="100">
						<template slot-scope="scope">{{ filter.filterType.clueStatus(scope.row.clueStatus) }}</template>
					</el-table-column>
					<el-table-column prop="upperName" label="上一步操作人" width="106">
					</el-table-column>
					<el-table-column prop="targetName" label="当前操作人" width="100">
					</el-table-column>
				</el-table>
				<el-pagination v-if="tableData.total" :current-page="tableData.filter.pageBean.pageIndex" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
				 :page-size="tableData.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="sizeChange"
				 @current-change="currentChange"></el-pagination>
			</div>
		</div>
		<!-- 提案申请 -->
		<layer :data="applyInfo" @on-ok="applyFor">
			<!-- <el-form v-if="targetActive" :ref="applyInfo.data" :model="applyInfo.data" :rules="applyInfo.rules">
				<el-form-item label="选择角色" class="is-required">
					<el-select v-model="roleForm.name" placeholder="请选择角色" @change="selectRole">
						<el-option v-for="item in roleList" :key="item.nextRoleId" :label="item.nextRoleName" :value="item.nextRoleId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择审核人" class="is-required">
					<el-select v-model="targetForm.id" placeholder="请选择审核人">
						<el-option v-for="item in superiorUser" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form> -->
			<p class="tips">是否确认提案申请？</p>
		</layer>
		<!-- 作废申请 -->
		<layer :data="invalidInfo" @on-ok="invalidFor('invalidInfo.data')">
			<div class="el-message--warning el-message massage-fixed">
				<i class="el-message__icon el-icon-warning i-warning"></i>
				<div class="el-message__content">作废后，此线索将不可恢复</div>
			</div>
			<el-form :ref="invalidInfo.data" :model="invalidInfo.data" :rules="invalidInfo.rules">
				<el-form-item label="请填写原因" prop="abolishInfo">
					<el-input type="textarea" v-model="invalidInfo.data.abolishInfo" placeholder="请输入请填写原因"></el-input>
				</el-form-item>
			</el-form>
		</layer>

		<!-- 取消提案 -->
		<layer :data="cencalLayer" @on-ok="cancelApplyLayer"></layer>
	</div>
</template>
<script>	
	import clue from '@/mixins/clue.js'
	import { TreeToArray } from '@/utils'

	export default {
		name: 'clue',
		mixins: [clue],
		data() {
			return {
				//当前登录用户
				userInfo: this.$store.state.common.userInfo,
				clueId: '',
				ajaxType: 'queryClue',
				// 申请提案
				applyInfo: {
					show: false,
					title: '申请提案',
					data: {},
					users: []
				},
				invalidInfo: {
					show: false,
					title: '作废线索',
					data: {},
					rules:
						{
							abolishInfo: { required: true, message: '请输入请填写原因', trigger: 'blur' },
						},
					loading: false,
					users: []
				},
				// 角色列表
				roleList: [],
				roleForm: {
					name: ''
				},
				targetActive: true,
				targetForm: {
					id: 0
				},
				superiorUser: [],
				cencalLayer: {
					title: '取消提案',
					show: false,
					tips: '确定取消提案？'
				}
			}
		},
		mounted() {
			this.$store.dispatch('setBreadData', [
				{
					name: '线索管理'
				},
				{
					name: '线索列表'
				}
			])
		},
		// computed: {
		// 	// 角色列表
		// 	roleList() {
		// 		return TreeToArray({ tree: this.$store.state.system.roleList })
		// 	}
		// },
		methods: {
			// 弹窗-提案申请
			showApplyLayer(id) {
				// if (this.$store.state.system.roleList && this.$store.state.system.roleList.length == 0) {
				// 	this.$store.dispatch('getRoleList')
				// }

				this.applyInfo.data = {}
				this.applyInfo.data.id = id
				this.applyInfo.show = true

				this.roleForm = {}
				this.targetForm = {}
				this.superiorUser = []
				// api.findSuperiorUser().then(res => {
				// 	if (res.length > 0) {
				// 		this.applyInfo.users = res
				// 	}
				// }, error => { })
				// api.queryCirculation({ type: 1 }).then((res) => {
				// 	this.roleList = res
				// }).catch(res => {
				// 	if (res.data.code == '30005') {
				// 		this.targetActive = false
				// 	}
				// })
			},
			// 弹窗-作废申请
			showInvalidLayer(id) {
				this.invalidInfo.data.abolishInfo = ''
				this.invalidInfo.data.id = id
				this.invalidInfo.show = true
			},
			// 提案申请
			applyFor() {
				// if (!this.targetActive) {
				// 	this.targetForm.id = this.userInfo.id
				// }
				// if (!this.targetForm.id) {
				// 	this.$msg.error('请选择审核人')
				// 	return false
				// }
				// this.applyInfo.data.targetId = this.targetForm.id
				api.switchClue({ id: this.applyInfo.data.id }).then(res => {
					this.applyInfo.loading = false
					if (res === 'success') {
						this.$msg({ message: '申请“提案”成功', type: 'success' })
						this.sumbitSave()
						this.$store.dispatch('getUnProcess')
					}
				}, error => { })
				this.applyInfo.show = false
			},
			// 作废申请
			invalidFor() {
				this.$refs[this.invalidInfo.data].validate((valid) => {
					if (valid) {
						api.abolishClue(this.invalidInfo.data).then(res => {
							this.invalidInfo.loading = false
							if (res === 'success') {
								this.$msg({ message: '线索作废成功', type: 'success' })
								this.sumbitSave()
								this.$store.dispatch('getUnProcess')
							}
						}, error => { })
						this.invalidInfo.show = false
					}
				})
			},
			// 选中角色
			selectRole(id) {
				this.targetForm = {}
				this.superiorUser = []
				api.queryRoleUserById({ id: id }).then(res => {
					this.superiorUser = res
				}).catch(res => {
					console.log(res)
				})
			},
			// 取消提案
			showCancelApplyLayer(id) {
				this.cencalLayer.show = true
				this.clueId = id
			},
			cancelApplyLayer(id) {
				api.cancelClue({ id: this.clueId }).then(res => {
					if (res == 'success') {
						this.$msg({ message: '取消提案成功', type: 'success' })
						this.sumbitSave()
						this.cencalLayer.show = false
						this.$store.dispatch('getUnProcess')
					}
				}).catch(res => {
					console.log(res)
				})
			}

		}
	}
</script>